<template>
  <div class="add">
    <el-card>
      <div>
        <el-icon><Tickets /></el-icon>数据列表
      </div>
      <el-button type="primary" @click="router.push('/pms/addBrand')"
        >添加</el-button
      >
    </el-card>
  </div>
  <el-table
    border
    table-layout="auto"
    cell-class-name="align-c"
    header-row-class-name="align-c"
    @selection-change="handleSelectionChange"
    :data="list"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="编号" prop="id" />
    <el-table-column label="品牌名称" prop="name" />
    <el-table-column label="品牌首字母" prop="firstLetter" />
    <el-table-column label="排序" prop="sort" />
    <el-table-column label="品牌制造商" prop="factoryStatus">
      <template #default="{ row }">
        <el-switch
          v-model="row.factoryStatus"
          :active-value="1"
          :inactive-value="0"
          @change="changefactoryStatus(row.id, row.factoryStatus)"
        />
      </template>
    </el-table-column>
    <el-table-column label="是否显示" prop="showStatus">
      <template #default="{ row }">
        <el-switch
          v-model="row.showStatus"
          :active-value="1"
          :inactive-value="0"
          @change="changeshowStatus(row.id, row.showStatus)"
        />
      </template>
    </el-table-column>
    <el-table-column label="相关" prop="loginTime">
      商品：100,评价：10000
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button @click="router.push(`/pms/addBrand?id=${row.id}`)"
          >编辑</el-button
        >
        <el-button type="danger" @click="detale(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="select">
    <div class="option">
      <el-select
        class="m-2"
        v-model="BatchV"
        placeholder="批量操作"
        size="large"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="BatchOperation">确定</el-button>
    </div>
    <ElConfigProvider :locale="zhCn">
      <div class="page">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="pageChangeHandle"
          @current-change="pageSizeChangeHandle"
        />
      </div>
    </ElConfigProvider>
  </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import useTable from "@/hooks/useTable";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import {
  BrandDeleteApi,
  BrandListApi,
  BrandUpdatefactoryStatusApi,
  BrandUpdateshowStatusApi,
} from "./api/api";
const router = useRouter();

const options = [
  {
    value: "op1",
    label: "显示品牌",
  },
  {
    value: "op2",
    label: "隐藏品牌",
  },
];

const ids = ref<number[]>([]);
const handleSelectionChange = (selection: any) => {
  ids.value = [];
  selection.forEach((item: any) => {
    ids.value.push(item.id);
  });
};
const BatchV = ref("");
const BatchOperation = () => {
  if (BatchV.value == "op1") {
    Batchprocessing(1);
  } else if (BatchV.value == "op2") {
    Batchprocessing(0);
  }
};
// 批量处理
const Batchprocessing = (showStatus: number) => {
  BrandUpdateshowStatusApi(ids.value, showStatus).then((res) => {
    if (res.code === 200) {
      ElMessage.success("修改成功");
      searchParamsFn();
    }
  });
};
const form = reactive({
  keyword: "",
});
const {
  list,
  total,
  pageNum,
  pageSize,
  searchParamsFn,
  pageChangeHandle,
  pageSizeChangeHandle,
} = useTable(BrandListApi, form);

// 品牌是否显示
const changefactoryStatus = (id: number, factoryStatus: number) => {
  BrandUpdatefactoryStatusApi(id, factoryStatus)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功");
      } else {
        factoryStatus = factoryStatus === 1 ? 0 : 1;
      }
    })
    .catch(() => {
      factoryStatus = factoryStatus === 1 ? 0 : 1;
    });
};
// 是否显示
const changeshowStatus = (id: number, showStatus: number) => {
  BrandUpdateshowStatusApi(id, showStatus)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功");
      } else {
        showStatus = showStatus === 1 ? 0 : 1;
      }
    })
    .catch(() => {
      showStatus = showStatus === 1 ? 0 : 1;
    });
};
// 删除
const detale = (id: number) => {
  ElMessageBox.confirm("是否要删除改品牌？", "提示", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  })
    .then(() => {
      BrandDeleteApi(id).then((res) => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          searchParamsFn();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除失败",
      });
    });
};
</script>

<style lang="less" scoped>
.searchBox {
  :deep(.el-card) {
    padding: 20px;
  }

  .top {
    position: relative;
    display: flex;
    .top_left {
      .search_txt {
        padding-left: 10px;
        font-size: 14px;
      }
    }
    .top_right {
      position: absolute;
      right: 20px;
    }
  }
  .under {
    padding: 20 40px 0;
    font-size: 14px;
    :deep(.el-input) {
      height: 32px;
      line-height: 32px;
      width: 210px;
    }
  }
}
:deep(.cell) {
  text-align: center;
}
.add {
  margin: 20px 0;
  :deep(.el-card__body) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.select {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .option {
    :deep(.el-button) {
      margin-left: 20px;
      padding: 10px;
    }
  }
}
</style>
